<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>MapQuery widget example</title>
  <link rel="stylesheet" href="../../lib/jquery/themes/base/jquery-ui.css" type="text/css" media="all" />
  <link rel="stylesheet" type="text/css" href="../style/style.css" />
  <script src="../../lib/openlayers/lib/OpenLayers.js" type="text/javascript"></script>
  <script src="../../lib/jquery/jquery-1.4.4.js" type="text/javascript"></script>
  <script src="../../lib/jquery/ui/jquery-ui.js" type="text/javascript"></script>
  <script src="../../lib/jquery/jquery.tmpl.js" type="text/javascript"></script>
  <script src="../../src/jquery.mapquery.core.js" type="text/javascript"></script>
  <script src="../../src/jquery.mapquery.popup.js" type="text/javascript"></script>
  <script src="../../src/jquery.mapquery.mqPopup.js" type="text/javascript"></script>
  <script type="text/javascript">
$(document).ready(function() {
    var map =$('#map').mapQuery({
        // Add layers to your map; you need to define at least one to be able
        // to see anything on the map
        layers:[{
            type: 'JSON',
            label: 'Polygons',
            url: '../data/poly.json'
        }],
        projection:'EPSG:4326',
        maxExtent: [0, -90, 160, 90]
    });
    $('#popup').mqPopup({
        map: '#map',
        contents: function(feature) {
            return '<p>' + feature.data.id + '</p>';
        }
    });
});
  </script>
</head>
<body>
    <div id="map" class="map"></div>
    <div id="popup" class="mq-widget"></div>
</body>
</html>
